<template>
  <div style="height: calc(100% - 40px);position: relative;">
    <el-button @click="formatFn" size="small" :icon="Brush" style="position: absolute;right: 10px;top: -25px;">格式化</el-button>
    <Editor @change-editor="changeEditor" ref="editorRef" height="100%" :isUpdateFormat="false" :modelValue="editorValue" language="text" />
  </div>
</template>

<script setup lang="ts">
import { Brush } from '@element-plus/icons-vue'
import Editor from '@/components/Editor.vue'
import { propTypes } from '@/utils/propTypes'
import { ref, watch, onMounted } from 'vue'
const editorRef = ref()
const editorValue = ref()
const props = defineProps({
  data: propTypes.object.def({})
})
const emit = defineEmits(['jsonValue'])
const changeEditor = (data: any) => {
  emit('jsonValue', data)
}
const init = () => {
  editorValue.value = ""
  if (props.data.requestContentType?.toLowerCase() == 'text') {
    editorValue.value = props.data.body || ""
    emit('jsonValue', editorValue.value)
  }
}
const formatFn = ()=>{
  editorRef.value.formatFn()
}
watch(() => props.data, (newVal, oldVal) => {
  if (JSON.stringify(newVal) != JSON.stringify(oldVal)) {
    init()
  }
}, {
  deep: true
})
onMounted(() => {
  init()
})
</script>

<style scoped></style>
